<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤实现排序</title>
</head>
<body>
  <div id="root">
<!--      输入项可以直接通过v-model修改状态值-->
      <input type="text" placeholder="请输入姓名" v-model="input">
      <ul>
          <li v-for="per in personRes" :key="per.id">
              {{per.name}}   ---   {{per.age}}   ---   {{per.sex}}
          </li>
      </ul>

      <br>

<!--      点击项可以直接通过函数修改状态值-->
        <button @click="sortType =1" >升序</button>
        <button @click="sortType =-1" >倒序</button>
  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'马冬梅',age:19,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:21,sex:'男'},
                {id:'004',name:'温兆伦',age:22,sex:'男'}
            ],
            input: '',
            sortType: 0
        },

        computed:{
            personRes(){
                 let result = this.persons.filter(per =>{
                    return per.name.indexOf(this.input) !== -1;
                })

                if (this.sortType){
                    result.sort((pre,next) =>{
                       return  this.sortType >0? pre.age-next.age:next.age-pre.age;
                    })
                }
                console.log(result)

                return result;

            }
        }
    })


</script>
</body>
</html>